import QtQuick 2.0

Canvas {
    id: clock
    
    onPaint: {
        var ctx = clock.getContext('2d');
        
        ctx.clearRect(0, 0, clock.width, clock.height);
        
        var time = new Date();
        
        var rad = 500;
        
        //ctx.fillStyle = "rgba(55,133,144,0.5)";
        //ctx.fillRect(0,0,rad,rad);
        
        var radius = 300;
        var centerX = parent.width / 2;
        var centerY = parent.height / 2;
            
        // outside of clock
        ctx.lineWidth = 16.0;
        ctx.strokeStyle = "#567";
        ctx.beginPath();
        ctx.arc(centerX,centerY,radius,0,Math.PI * 2);
        ctx.closePath();
        ctx.stroke();
            
        // second dots
        var theta = 0;
        var distance = radius * 0.90; // 90% from the center
        var x = 0;
        var y = 0;
        
        ctx.lineWidth = 4.0;
        ctx.strokeStyle = "#137";
        
        for(var i=0; i<60; i++){
            // calculate Theta
            theta = theta + (6 * Math.PI / 180);
            // calculate x,y
            x = centerX + distance * Math.cos(theta);
            y = centerY + distance * Math.sin(theta);
              
            ctx.beginPath();
            ctx.arc(x,y,5,0,Math.PI * 2);
            ctx.closePath();
            ctx.stroke();
        }
        
        // hour dots
        ctx.lineWidth = 20.0;
        ctx.strokeStyle = "#137";
        
        for(var i=0; i<12; i++){
            // calculate Theta
            theta = theta + (30 * Math.PI / 180);
            // calculate x,y
            x = centerX + distance * Math.cos(theta);
            y = centerY + distance * Math.sin(theta);
            
            ctx.beginPath();
            ctx.arc(x,y,5,0,Math.PI * 2,true);
            ctx.closePath();
            ctx.stroke();
        }
        
        // second hand
        var handSize = radius * 0.80; // 80% of the radius
        var sec = time.getSeconds();
        
        theta = (6 * Math.PI / 180);
        x = centerX + handSize * Math.cos(sec * theta - Math.PI/2);
        y = centerY + handSize * Math.sin(sec * theta - Math.PI/2);
        
        ctx.lineWidth = 8.0;
        ctx.strokeStyle = "#423";
        ctx.lineCap = "round";
            
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(centerX,centerY);
        ctx.closePath();
        ctx.stroke();
        
        // minute hand
        handSize = radius * 0.60; // 60% of the radius
        var min = time.getMinutes();
        
        theta = (6 * Math.PI / 180);
        x = centerX + handSize * Math.cos(min * theta - Math.PI/2);
        y = centerY + handSize * Math.sin(min * theta - Math.PI/2);
        
        ctx.lineWidth = 12.0;
        ctx.strokeStyle = "#423";
        ctx.lineCap = "round";
            
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(centerX,centerY);
        ctx.closePath();
        ctx.stroke();
        
        // hour hand
        handSize = radius * 0.40; // 40% of the radius
        var hour = time.getHours();
        
        theta = (30 * Math.PI / 180);
        x = centerX + handSize * Math.cos(hour * theta - Math.PI/2);
        y = centerY + handSize * Math.sin(hour * theta - Math.PI/2);
        
        ctx.lineWidth = 16.0;
        ctx.strokeStyle = "#423";
        ctx.lineCap = "round";
            
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(centerX,centerY);
        ctx.closePath();
        ctx.stroke();
    }
    
    Timer {
        interval: 1000
        running: true
        repeat: true
        triggeredOnStart: true
        onTriggered: {
            clock.requestPaint();
        }
    }
}
